<template>
  <div class="noo">
    <div class="no">
      <a-list
        class="demo-loadmore-list"
        :item-layout="config.layout"
        :data-source="list"
      >
        <!-- <template #loadMore>
      <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
        <a-spin v-if="loadingMore" />
        <a-button v-else @click="loadMore">loading more</a-button>
      </div>
    </template> -->
        <template #renderItem="{ item }">
          <a-list-item>
            <template #actions>
              <EditTwoTone
                :style="{ fontSize: '18px' }"
                @click="edit(item)"
                v-if="config.edit"
              />
              <DeleteTwoTone
                :style="{ fontSize: '18px' }"
                @click="del(item)"
                v-if="config.del"
              />
              <TabletTwoTone
                :style="{ fontSize: '18px' }"
                @click="othenBtnOne(item)"
                v-if="config.othenBtnOne"
              />
              <DiffTwoTone
                :style="{ fontSize: '18px' }"
                @click="othenBtnTwo(item)"
                v-if="config.othenBtnTwo"
              />
              <PlusSquareOutlined
                :style="{ fontSize: '18px' }"
                @click="othenBtnThree(item)"
                v-if="config.othenBtnThree"
              />
              <PlusSquareTwoTone
                :style="{ fontSize: '18px' }"
                @click="othenBtnFour(item)"
                v-if="config.addwallet"
              />
              <UnlockTwoTone
                :style="{ fontSize: '18px' }"
                @click="othenBtnLock(item)"
                v-if="config.lock"
              />
            </template>
            <a-list-item-meta :description="item[config.subtitle]">
              <template #title>
                {{ item[config.title] }}
              </template>
              <!-- <template #avatar>
            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          </template> -->
            </a-list-item-meta>
            <template v-for="(content, index) in config.content">
              <div>{{ content["key"] }} : {{ item[content["value"]] }}</div>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div
      class="pagination-warp"
      style="display: flex; justify-content: space-between"
    >
      <a-pagination
        simple
        show-size-changer
        :current="state.page.pageNum"
        :pageSize="state.page.pageSize"
        :total="config.total"
        @change="onHandleCurrentChange"
        @showSizeChange="onHandleSizeChange"
      />
      <a-button type="primary" v-if="config.submit" @click="onSubmit"
        >提交</a-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from "vue";
import {
  EditTwoTone,
  DeleteTwoTone,
  TabletTwoTone,
  DiffTwoTone,
  TransactionOutlined,
  UnlockTwoTone,
  PlusSquareOutlined,
  PlusSquareTwoTone,
} from "@ant-design/icons-vue";

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  config: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits([
  "othenBtnOne",
  "othenBtnTwo",
  "edit",
  "del",
  "pageChange",
  "onSubmit",
  "othenBtnThree",
  "lock",
  "addwallet",
  "look",
]);

const state = reactive({
  page: {
    pageNum: 1,
    pageSize: 10,
  },
});

const othenBtnOne = (row: any) => {
  emit("othenBtnOne", row);
};

const othenBtnTwo = (row: any) => {
  emit("othenBtnTwo", row);
};
const othenBtnThree = (row: any) => {
  emit("othenBtnThree", row);
};
const othenBtnFour = (row: any) => {
  emit("addwallet", row);
};

const othenBtnLock = (row: any) => {
  emit("lock", row);
};
const edit = (row: any) => {
  emit("edit", row);
};

const del = (row: any) => {
  emit("del", row);
};
const look = (row: any) => {
  emit("look", row);
};

const onSubmit = () => {
  emit("onSubmit");
};
const onHandleSizeChange = (current: number, size: number) => {
  state.page.pageSize = size;
  emit("pageChange", state.page);
};

const onHandleCurrentChange = (current: number, size: number) => {
  state.page.pageNum = current;
  emit("pageChange", state.page);
};
</script>

<style lang="less" scoped>
.noo {
  height: calc(100vh - 56px);

  .no {
    height: calc(100vh - 110px);
    overflow-y: scroll;
    border-radius: 4px;

    :deep(.ant-list-vertical .ant-list-item .ant-list-item-action) {
      margin: 0 !important;
    }

    :deep(.ant-list-vertical .ant-list-item .ant-list-item-meta) {
      margin-bottom: 12px !important;
    }
  }
}

.pagination-warp {
  margin-top: 20px;

  :deep(
      .ant-pagination.ant-pagination-simple
        .ant-pagination-next
        .ant-pagination-item-link
    ) {
    height: 32px !important;
  }

  :deep(
      .ant-pagination.ant-pagination-simple
        .ant-pagination-prev
        .ant-pagination-item-link
    ) {
    height: 32px !important;
  }

  :deep(.ant-pagination) {
    line-height: 32px !important;
  }
}

.demo-loadmore-list {
  :deep(.ant-list-item-action) {
    text-align: right !important;
  }

  :deep(.ant-list-item) {
    background-color: #fff !important;
    border-radius: 4px;
  }

  :deep(.ant-list-item-meta-title) {
    margin: 0 !important;
  }

  :deep(.ant-list-item) {
    padding: 12px 10px !important;
  }
}
</style>
